<template>
  <div id="heard">
    <!-- <div>父组件传过来的值【toChildrenData】：{{toChildrenData}}</div> -->
    <div style="height: 100px" ref="myChart" id="mychart"></div>
  </div>
</template>
<script>
import echartsapi from "@/api/report";
import html2canvas from "html2canvas";
import ExcelJS from "exceljs"; // 引入exceljs, 用于生成excel文件
import { saveAs } from "file-saver";
import * as echarts from 'echarts';
export default {
  name: "myChart",
  data() {
    return {
      option: {
        title: {
          text: "正式投诉",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [12, 13, 10, 13, 9, 23, 21],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [22, 18, 19, 23, 29, 33, 31],
          },
         
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.initecharts();
  },
  methods: {
    initecharts() {
        console.log("echarts")
     let myEcharts = echarts.init(this.$refs.myChart);
      myEcharts.setOption(this.option);
    },
    // initecharts(year, problemAttribution, formalComplaintType) {
    //   var year = this.year;
    //   var problemAttribution = this.problemAttribution;
    //   var formalComplaintType = this.formalComplaintType;
    //   echartsapi
    //     .getEcharts(year, problemAttribution, formalComplaintType)
    //     .then((res) => {
    //       console.log("123");
    //       console.log(res);
    //        this.option.series = res;
    //       console.log(this.option.series);
    //       let myEcharts = echarts.init(this.$refs.myChart);

    //       myEcharts.setOption(this.option);
    //     })
    //     .catch(() => {
    //       // let myEcharts = echarts.init(this.$refs.myChart);
    //       // myEcharts.setOption(this.option);
    //       // myEcharts.clear();
    //       //myEcharts.dispose();
    //     });
    // },
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
  },
};
</script>

<style>
#mychart {
  width: 50%;
  height: 400px;
  /* border: 1px solid red; */
}
#mychart1 {
  width: 50%;
  height: 80%;
  /* border: 1px solid red; */
}
#heard {
  padding-top: 15px;
  display: flex;
  height: 800px;
}
</style>
